<template>
  <div class="dashboard-container">
    <div class="header">
      <h1>BCNF数据库修复检查系统</h1>
      <p class="subtitle">Database Repair Checking System under BCNF</p>
    </div>

    <div class="content-section">
      <div class="section-card">
        <h2><i class="el-icon-info"></i> 系统概述</h2>
        <div class="section-content">
          <p>　在现代数据管理中，确保数据库的一致性和完整性至关重要。然而，由于数据输入错误、系统故障或人为操作失误等多种因素，数据库中的数据可能违反预定义的完整性约束，导致数据不一致并带来潜在的业务风险。</p>
          <p>　本系统是一个基于BCNF的数据库修复检查系统，旨在对用户给出的BCNF条件下的不一致数据库和其符合要求的一致性子集进行数据库修复检查。</p>
        </div>
      </div>

      <div class="section-card">
        <h2><i class="el-icon-cpu"></i> 系统功能</h2>
        <div class="features-grid">
          <div class="feature-item">
            <i class="el-icon-upload"></i>
            <h3>本地存储功能</h3>
            <p>能够保存用户上传的SQL格式的数据库文件</p>
          </div>
          <div class="feature-item">
            <i class="el-icon-document"></i>
            <h3>SQL文件解析</h3>
            <p>根据用户上传的SQL文件提取出关系模式的属性集U</p>
          </div>
          <div class="feature-item">
            <i class="el-icon-set-up"></i>
            <h3>函数依赖集输入</h3>
            <p>用户可为关系模式添加函数依赖集F</p>
          </div>
          <div class="feature-item">
            <i class="el-icon-data-line"></i>
            <h3>数据库展示</h3>
            <p>对解析后的数据库进行关系模式和元组的可视化展示</p>
          </div>
          <div class="feature-item">
            <i class="el-icon-check"></i>
            <h3>一致性检查</h3>
            <p>根据函数依赖集对数据库进行一致性检查，返回检查日志</p>
          </div>
          <div class="feature-item">
            <i class="el-icon-finished"></i>
            <h3>修复检查</h3>
            <p>对不一致的BCNF数据库和一致性子集进行修复检查</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  color: #333;

  .header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    h1 {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .subtitle {
      font-size: 1.2rem;
      color: #7f8c8d;
      font-style: italic;
    }
  }

  .content-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .section-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 25px;
    transition: transform 0.3s, box-shadow 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    h2 {
      color: #34495e;
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 1.5rem;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      display: flex;
      align-items: center;

      i {
        margin-right: 10px;
        color: #3498db;
      }
    }
  }

  .section-content {
    line-height: 1.8;
    color: #555;

    p {
      margin-bottom: 15px;
      text-indent: 2em;
    }
  }

  .concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
  }

  .concept-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    border-left: 4px solid #3498db;

    h3 {
      color: #2c3e50;
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 1.2rem;
    }

    p {
      color: #666;
      line-height: 1.6;
      margin: 0;
      text-indent: 2em;
    }
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 15px;
  }

  .feature-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover {
      background: #e8f4fc;
      transform: translateY(-3px);
    }

    i {
      font-size: 2.5rem;
      color: #3498db;
      margin-bottom: 15px;
    }

    h3 {
      color: #2c3e50;
      margin: 10px 0;
      font-size: 1.1rem;
    }

    p {
      color: #666;
      font-size: 0.9rem;
      margin: 0;
      line-height: 1.5;
    }
  }

  @media (max-width: 768px) {
    .dashboard-container {
      padding: 15px;
    }

    .header h1 {
      font-size: 2rem;
    }

    .concepts-grid,
    .features-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>